<template>
    <div id="consumer">
        <h3>您好，欢迎进入前台用户详情界面</h3>
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item >前台用户列表</el-breadcrumb-item>
        </el-breadcrumb><br>

        <!--条件查询-->
        <el-form :inline="true" :model="consumersObj" ref="formList" class="demo-form-inline">
            <el-form-item label="用户名">
                <el-input v-model="consumersObj.nickName" placeholder="请输入用户名"></el-input>
            </el-form-item>
            <el-form-item label="姓名">
                <el-input v-model="consumersObj.realName" placeholder="请输入姓名"></el-input>
            </el-form-item>
            <el-form-item label="用户名">
                <el-input v-model="consumersObj.phone" placeholder="请输入手机号"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="queryBtn">查询</el-button>
                <el-button @click="resetForm('formList')">
                    <i class="el-icon-refresh-right"></i>
                    重置?
                </el-button>
            </el-form-item>
        </el-form>

        <el-button type="warning" plain @click="delsBtn">
            <i class="el-icon-zoom-out"></i>
            批量删除
        </el-button>
        <!--数据表格-->
        <el-table
                ref="multipleTable"
                :data="tableData"
                tooltip-effect="dark"
                style="width: 100%"
                @selection-change="handleSelectionChange">
            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>
            <el-table-column
                    prop="consumerId"
                    label="编号">
            </el-table-column>
            <el-table-column
                    prop="nickName"
                    label="昵称">
            </el-table-column>
            <el-table-column
                    prop="username"
                    label="登录账号">
            </el-table-column>
            <el-table-column
                    prop="password"
                    label="登录密码">
            </el-table-column>
            <el-table-column
                    prop="phone"
                    label="电话号码">
            </el-table-column>
            <el-table-column
                    prop="realName"
                    label="姓名">
            </el-table-column>
            <el-table-column
                    prop="avatarImg"
                    label="头像">
                <template slot-scope="scope">
                    <el-avatar :size="45" :src="scope.row.avatarImg" @error="errorHandler">
                        <img src="https://src/assets/img/6e8c4e3d1f1a94ef1beb624c2f42ebdc.jpg"/>
                    </el-avatar>
                </template>
            </el-table-column>

            <el-table-column
                    prop="sex"
                    label="性别">
            </el-table-column>
            <el-table-column
                    prop="state"
                    label="是否冻结/恢复">
                <template slot-scope="scope">
                    <el-switch
                            v-model="scope.row.state"

                            active-color="#13ce66"
                            inactive-color="#ff4949"
                            :active-value="1"
                            :inactive-value="2"
                            @change="switchState(scope.row)"
                    >
                    </el-switch>
                </template>
            </el-table-column>
            <el-table-column
                    prop="merchantTag"
                    label="是否是商户">
                <template slot-scope="scope">
                    <span v-if="scope.row.merchantTag=='S001-1'">否</span>
                    <span v-if="scope.row.merchantTag=='S001-4'">是</span>
                </template>
            </el-table-column>
            <el-table-column
                    prop="supplierTag"
                    label="是否是供应商">
                <template slot-scope="scope">
                    <span v-if="scope.row.supplierTag=='G001-1'">否</span>
                    <span v-if="scope.row.supplierTag=='G001-4'">是</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="操作">
                <template slot-scope="scope">
                    <el-button
                            @click="delUser(scope.row)"
                            type="text"
                            size="small"
                            icon="el-icon-delete">
                        删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <!--分页组件-->
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="PageNo"
                :page-sizes="pageSizeList"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
        </el-pagination>
    </div>
</template>

<script>
export default {
    name: "Consumer",
    data() {
        return {
            //批量选中的row
            multipleSelection: [],
            //查询条件对象
            consumersObj: {
                nickName: "",
                realName: "",
                phone: ""
            },
            // 当前页号
            pageNo: 1,
            // 当前页大小
            pageSize: 5,
            // 总记录数
            total: 0,
            // 页大小列表
            pageSizeList: [2, 5, 10, 20],
            //返回数据对象
            tableData:[],
        }
    },
    methods: {
        //删除
        delUser(row) {
            //弹出问框
            this.$confirm('是否确认删除？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                //确定
                const { data: res } = await this.$http.post(`/community/consumer/delete`,row);
                this.$message.success(res);
                //界面刷新
                this.queryBtn();
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消'
                });
            });
        },
        //批量删除
        delsBtn() {
            if(this.multipleSelection.length === 0)
                return this.$message.info("请先选中你要删除的用户！")
            this.$confirm('是否确认删除？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                //确定
                const { data: res } = await this.$http.post(`/community/consumer/delsConsumer`,this.multipleSelection);
                this.$message.success(res);
                //界面刷新
                this.queryBtn();
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消'
                });
            });
        },
//冻结/恢复用户
        async switchState(row) {
            const result = await this.$http.post('/community/consumer/switchState',row);
            if(result.status === 200)
                this.$message.success(result.data)
        },
        //查询
        async queryBtn() {
            const { data: res } = await this.$http.post(`/community/consumer/getConsumerList/${this.pageNo}/${this.pageSize}`,this.consumersObj);
            this.tableData = res.rows;
            this.total = res.total
        },

        //重置
        resetForm(formName) {
            console.log(formName)
            console.log(this.$refs[formName])
            this.$refs[formName].resetFields();
        },
        //页大小改变
        handleSizeChange(val) {
            this.pageSize = val
            this.queryBtn()
        },
        //当前页改变
        handleCurrentChange(val){
            this.pageNo = val
            this.queryBtn()
        },
        //批量选择
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        //头像展示失败
        errorHandler() {
            return true
        },
    },
    created(){
        this.queryBtn();
    }
}
</script>

<style scoped>

</style>